<template>
	<view class="p_absolute" :style="'top: ' + showY + 'px; left: ' + showX + 'px; z-index: 1;'" >
		<image src="/static/zan_h.png" class="w40 liks_animation p_absolute" style="border-radius: 0; z-index: 2;" :animation="animationData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: -' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px ; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px ; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px ; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px ; '" :animation="animationSmallData"></image>
			<image src="/static/zan_h.png" class="w30 liks_animation p_absolute" :style="'border-radius: 0; left: ' + rand(0, 35) + 'px; bottom: -' + rand(0, 50) + 'px ; '" :animation="animationSmallData"></image>
	</view>	
</template>

<script>
	export default {
		name:"likesAnimations",
		props : {
			customNavHeight : ''
		},
		data() {
			return {
				animationData : {},
				animationSmallData : {},
				showX: '',
				showY: ''
			}
		},
		methods: {			
			//双击点赞
			likes(e) {
				this.showX = e.detail.x.toFixed(0)
				this.showY = e.detail.y.toFixed(0) - this.customNavHeight
				console.log(this.showX,this.showY)
				this.animation_likes()
				this.animation_likes_small()
			},
			//点赞动画
			animation_likes() {			
				//创建动画
				var animation = uni.createAnimation({
					transformOrigin: "ease-in",
					duration: 200, //动画持续时间
					// timingFunction: 'linear',  //linear 全程匀速运动
					// delay:300  //延迟两秒执行动画
				}) 
				this.animation = animation
				
				animation.opacity(1).scale(1.5,1.5).step()
				
				animation.rotate(15).step()
				
				animation.rotate(-15).step()
				
				animation.rotate(0).step()
				
				animation.scale(0).opacity(0).step()
								
				this.animationData = animation.export()
				
				setTimeout(function() {
				  this.animationData = animation.export()
				}.bind(this), 1000)
			},
			animation_likes_small() {		
				//创建动画
				var animation = uni.createAnimation({
					transformOrigin: "ease-in",
					duration: 100, //动画持续时间
					// timingFunction: 'linear',  //linear 全程匀速运动
					// delay:300  //延迟两秒执行动画
				}) 
				this.animation = animation
				
				animation.opacity(1).translate(-5,-5).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(1.5).step()
				animation.translate(this.rand(0,15),-10).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(1.3).step()				
				animation.translate(-this.rand(0,15),-15).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(1.1).step()
				animation.translate(this.rand(0,15),-20).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(0.9).step()
				animation.translate(-this.rand(0,15),-25).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(0.8).step()
				animation.translate(this.rand(0,15),-30).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(0.7).step()
				animation.translate(-this.rand(0,15),-40).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(0.5).step()
				animation.translate(this.rand(0,15),-50).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(0.3).step()
				animation.translate(-this.rand(0,15),-60).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(0.1).step()
				animation.translate(this.rand(0,15),-70).rotate(-this.rand(0,10)).rotate(this.rand(0,10)).scale(0).step()
				
				animation.opacity(0).step()
				
				animation.translate(0).rotate(0).step()
								
				this.animationSmallData = animation.export()
				
				setTimeout(function() {
				  this.animationSmallData = animation.export()
				}.bind(this), 1000)
			},
			rand(m, n)  {
			    return Math.ceil(Math.random() * (n-m+1) + m-1)
			}
		},
	}
</script>

<style>
	.liks_animation {
		opacity: 0;
	}	
</style>